<!--
 * @Author: Lzx
 * @LastEditors: Lzx
 * @Date: 2021-06-24 09:06:36
 * @LastEditTime: 2022-11-11 22:37:10
 * @FilePath: /web-vue/src/views/Login.vue
 * @Description: 系统登录组件
-->
<template>
    <div class="login" >
    <el-form
      ref="loginForm"
      v-model="loginForm"
     
      label-position="left"
      label-width="0px"
      class="login-form"
    >
      <h3 class="title">欢迎使用民宿管理系统</h3>
      <el-form-item prop="user">
        <el-input
          v-model="loginForm.user"
          type="text"
          auto-complete="off"
          placeholder="账号"
        >
          <svg-icon
            slot="prefix"
            icon-class="user"
            class="el-input__icon input-icon"
          />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter="login"
          :disabled="submitDisabled"
        >
          <svg-icon
            slot="prefix"
            icon-class="password"
            class="el-input__icon input-icon"
          />
        </el-input>
      </el-form-item>
      
      
      
      <el-form-item style="width: 100%">
        <el-button
        class="loginBt" 
          size="medium"
          type="primary"
          style="width: 100%"
          @click="login"
        >
          <span >登 录</span>
        </el-button>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button
          size="medium"
          type="primary"
          style="width: 100%"
          @click="open"
          class="loginBt2" 
        >
          <span >注 册</span>
        </el-button>
      </el-form-item>
    </el-form>
 

    <!-- 编辑地区表单 -->
    <ChooseForm ref="chooseForm" @afterSubmit="loginBefore"></ChooseForm>

   
    <el-dialog 
      :visible.sync="visible"
      append-to-body  
      :center="true" 
      destroy-on-close="true" 
      title="添加商品类别">
      <!-- 用户注册表单 -->
    <RegisterForm ref="registerForm" class="el-dialog__wrapper" append-to-body></RegisterForm>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

import ChooseForm from "@/views/Region/chooseForm.vue";
import RegisterForm from "@/views/SysUser/registerForm.vue";
import SvgIcon from '@/components/SvgIcon/index.vue'
export default {
  name: "login",

  components: {
    ChooseForm,
    RegisterForm,
    SvgIcon
  },

  data() {
    return {
      visible: false,
      loginForm: {
        user: "",
        password: "",
      },
      submitDisabled: false,
    };
  },

  computed: {
    // 最近一次路由url属性变化。latestRouteUrl 是 store.js 的全局变量，
    latestRouteUrl: {
      get() {
        return this.$store.state.latestRouteUrl;
      },
      set(val) {
        if (val) this.$store.state.latestRouteUrl = val;
      },
    },
  },

  methods: {
    open() {
      this.visible = true;
    },
    
    // store 方法
    ...mapMutations({
      initState: "initState",
    }),

    // 登录请求处理
    login() {
      
      if(this.loginForm.user!=null && this.loginForm.password != null && this.loginForm.user!='' && this.loginForm.password != ''){
        // 密码输入框不可用
      this.submitDisabled = true;
      // 请求参数
      let param = {};
      param["username"] = this.loginForm.user;
      param["password"] = this.loginForm.password;
      const loading = this.$loading({
        target: document.querySelector(".login"),
        lock: true,
        text: "正在登录，请耐心等待！",
      });
    

      let vueIns = this;
      this.$api
        .userLoginAuth(param)
        .then((res) => {
          let { status, message, data } = res.data;
          if (status === 200) {
            // 保存会话
            localStorage.setItem("userSession", JSON.stringify(data));
            // 初始化 vuex 全局变量
            this.initState();
            // 默认路由跳转
            //this.$router.push("/");
            //alert("租客");
            // 初始化字典信息
            this.initCommonDict();
            // 初始化部分页面的权限控制
            this.initAuth();

            // 默认路由跳转
            // this.$router.push("/view/Index");

            // 根据角色路由跳转
            if (data.roleIds.indexOf(7) > -1) {
              this.$router.push("/index");
              //alert("房东")
            } else {
              this.$router.push("/view/Index");
              //alert("管理员")
            }

          } else {
            this.$alert(message, "登录失败", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {
                this.submitDisabled = false;
              },
            });
          }

          loading.close();
          this.submitDisabled = false;
        })
        .catch(function (err) {
          loading.close();
          vueIns.submitDisabled = false;
          console.log("【用户登录】接口发生错误: " + err);
        });
        }else{
      this.$message.error('用户名或密码不能为空');
    }
    },

    // 初始化通用字典信息
    initCommonDict() {
      // 1）获取部门列表
      this.$api
        .querySysDepartment()
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            this.$store.state.DICT.deptList = data;
          } else {
            this.$alert(`${message}`, "部门列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【部门列表】查询接口发生错误：${err}`);
        });

      // 2）获取系统用户列表
      this.$api
        .querySysUser({ pageSize: 1000 })
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            this.$store.state.DICT.sysUserList = data.items;
          } else {
            this.$alert(`${message}`, "系统用户列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【系统用户列表】查询接口发生错误：${err}`);
        });

      // 5）获取系统角色列表
      this.$api
        .querySysRoleList()
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            this.$store.state.DICT.sysRoleList = data;
          } else {
            this.$alert(`${message}`, "系统角色列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【系统角色列表】查询接口发生错误：${err}`);
        });

      // 6）获取房源类型列表
      this.$api
        .queryHouseTypeDictList({ pageSize: 1000 })
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            this.$store.state.DICT.houseTypeSelect = data;
          } else {
            this.$alert(`${message}`, "房源类型列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【房源类型列表】查询接口发生错误：${err}`);
        });

      // 7）获取地区列表
      this.$api
        .queryRegionTreeList()
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            this.$store.state.DICT.regionCode = data;
          } else {
            this.$alert(`${message}`, "地区列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【地区列表】查询接口发生错误：${err}`);
        });

      // 8）获取房源列表
      this.$api
        .queryHouseDictList()
        .then((res) => {
          let { status, message, data } = res.data; // 响应数据
          if (status == 200) {
            // list 转 map
            let map = new Map();
            data.forEach((element) => {
              map.set(element.code, element.name);
            });
            this.$store.state.DICT.houseMap = map;
          } else {
            this.$alert(`${message}`, "房源列表", {
              type: "error",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }
        })
        .catch(function (err) {
          loading.close();
          vueIns.visible = false;
          console.log(`【房源列表】查询接口发生错误：${err}`);
        });
    },

    // 登录前置处理
    loginBefore(region) {
      // 高风险地区(拦截)
      if (region.isHighRisk === "1") {
        this.$alert(
          `您来自中高风险地区，暂时无法登录本站点！`,
          "登录拦截提示",
          {
            type: "error",
            confirmButtonText: "确定",
            callback: (action) => {},
          }
        );
      } else {
        // 登录
        this.login();
      }
    },

    // 初始化权限
    initAuth() {
      if (this.$store.state.userSession) {
        if (this.$store.state.userSession.roleIds.indexOf(1) > -1) {
          this.$store.state.auth.isDelete = true;
          this.$store.state.auth.isAdd = true;
          this.$store.state.auth.isEdit = true;
          this.$store.state.auth.isAppraise = true;
        } else if (this.$store.state.userSession.roleIds.indexOf(5) > -1) {
          this.$store.state.auth.isEdit = true;
        } else if (
          this.$store.state.userSession.roleIds.indexOf(2) > -1 ||
          this.$store.state.userSession.roleIds.indexOf(7) > -1
        ) {
          this.$store.state.auth.isAdd = true;
          this.$store.state.auth.isAppraise = true;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// // 顺时针旋转
// @-webkit-keyframes anticlockwise-rotation {
//   from {
//     -webkit-transform: rotate(0deg);
//   }
//   to {
//     -webkit-transform: rotate(360deg);
//   }
// }

// @-webkit-keyframes vertical-rotation {
//   from {
//     -webkit-transform: rotate(90deg);
//   }
//   to {
//     -webkit-transform: rotate(450deg);
//   }
// }

// // 逆时针旋转
// @-webkit-keyframes clockwise-rotation {
//   from {
//     -webkit-transform: rotate(360deg);
//   }
//   to {
//     -webkit-transform: rotate(0deg);
//   }
// }
.el-dialog__wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 15%;
    overflow: auto;
    margin: 0;
}
.el-form-item .el-form-item__content .el-button {
  margin-left: 0;
}
.loginBt {
  font-size: 0px;
  
  left: 0;
  top: 52vh;
  width: 486px;
  height: 43px;
  background: #409eff;
  text-align: center;
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 14px;
  color: #ffffff;
}
.loginBt2 {
  font-size: 0px;
  
  
  top: 62vh;
  width: 486px;
  height: 43px;
  background: #67c23a;
  text-align: center;
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 14px;
  color: #ffffff;
}
.login {
  //让整个div固定在屏幕的最上方和最左方
  position: fixed;
  top: 100;
  left: 0;
  //让整个div跟屏幕实现一模一样的大小
  width: 100%;
  height: 87%;
 // min-width: 1000px;
  //让整个div在HTML页面中各个层级的下方，正常情况下，第一个创建的层级z-index的值是0
  z-index: index;
  zoom: 1;

  display: flex;
  justify-content: center;
  align-items: center;
  
  background-size: cover;
  //让图片随屏幕大小同步缩放
 //background-repeat:no-repeat ;
  //让图片随屏幕大小同步缩放
    -webkit-background-size: cover !important;
   -moz-background-size: cover !important;
   -o-background-size: cover !important;
  background-size:100 auto;
  background-image: url("~@/assets/images/background/bg1.jpg");
}
  // 记住密码后输入框默认浏览器样式调整
  input:-webkit-autofill {
    -webkit-text-fill-color: #42526c !important; // 记住密码的字的颜色
    transition: background-color 999999s ease-in-out 999999s; // 延时渲染背景色来去除背景色
    caret-color: #21d7eb; //光标颜色
  }

.title {
  margin: 0 auto 30px 25px;
  text-align: center;
  color: #707070;
}

.login-form {
  opacity:0.95;
  border-radius: 6px;
  background: #ffffff;
  width: 385px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  display: inline-block;
  height: 38px;
  //float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.register {
  float: right;
  color: rgb(24, 144, 255);
}
a {
  color: #1890ff;
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
}

</style>

